<template>
  <view class="ve-input-wrapper">
    <input
      :type="type"
      v-if="type != 'textarea'"
      class="ve-input"
      :style="{
        paddingRight: showClear && !disabled ? '48rpx' : '0rpx',
        ...customStyle,
      }"
      v-model="inputVal"
      :disabled="disabled"
      :maxlength="maxlength"
      :placeholder-style="placeholderStyle"
      :placeholder="placeholder"
      :cursor-spacing="cursorSpacing"
      @input="handleInput"
      @change="handleChange"
      @blur="handleBlur"
      @focus="handleFocus"
      @confirm="handleConfirm"
      @keyboardheightchange="handleKeyboardheightchange"
    />
    <textarea
      v-else
      class="ve-textarea"
      :style="{ paddingRight: showClear && !disabled ? '74rpx' : '0rpx' }"
      v-model="inputVal"
      :disabled="disabled"
      :maxlength="maxlength"
      :placeholder-style="placeholderStyle"
      :placeholder="placeholder"
      :cursor-spacing="cursorSpacing"
      :auto-height="autoHeight"
      @input="handleInput"
      @change="handleChange"
      @blur="handleBlur"
      @focus="handleFocus"
      @confirm="handleConfirm"
    />
    <view class="clear-wrap" :style="computedClearStyle" v-if="showClear && !disabled">
      <ve-icon name="icon-clear" size="32" @click="clearFn" />
    </view>
  </view>
</template>

<script>
  export default {
    inheritAttrs: false,
    props: {
      modelValue: {
        type: [String, Number],
        default: '',
      },
      type: {
        type: String,
        default: 'text',
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      placeholder: {
        type: String,
        default: '请输入',
      },
      placeholderStyle: {
        type: String,
        default: 'color: #9ea5bb',
      },
      maxlength: {
        type: [String, Number],
        default: -1,
      },
      cursorSpacing: {
        type: [Number],
        default: 0,
      },
      customStyle: {
        type: Object,
        default: () => {},
      },
      allowClear: {
        type: Boolean,
        default: true,
      },
      // 键盘收起后是否触发blur事件
      keyboardBlur: {
        type: Boolean,
        default: true,
      },
      autoHeight: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['update:modelValue', 'change', 'clear', 'input', 'blur', 'confirm', 'focus', 'keyboardheightchange'],
    options: {
      virtualHost: true,
    },
    computed: {
      showClear() {
        return this.allowClear && this.inputVal
      },
      computedClearStyle() {
        if (this.type == 'textarea') {
          return {
            top: '24rpx',
            right: '26rpx',
            height: '44rpx',
          }
        }
        return {}
      },
      inputVal: {
        set(val) {
          this.$emit('update:modelValue', val)
          this.$emit('change', val)
        },
        get() {
          return this.modelValue
        },
      },
    },
    methods: {
      handleChange(e) {
        this.inputVal = e.detail.value
      },
      handleBlur() {
        setTimeout(() => {
          this.$emit('blur', this.inputVal)
        }, 0)
      },
      handleInput() {
        this.$emit('input')
      },
      clearFn() {
        this.inputVal = ''
        this.$emit('clear')
      },
      handleFocus() {
        this.$emit('focus')
      },
      handleConfirm() {
        this.$emit('confirm')
      },
      handleKeyboardheightchange(event) {
        this.$emit('keyboardheightchange', event)
        let keyboardheight = event.detail.height
        // 兼容app把键盘手动关闭
        if (keyboardheight == 0 && this.keyboardBlur) {
          this.$emit('blur', this.inputVal)
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .ve-input-wrapper {
    width: 100%;
    position: relative;
  }
  .ve-input,
  .ve-textarea {
    font-size: 28rpx;
    :disabled {
      color: rgb(205, 206, 208);
    }
  }
  .ve-textarea {
    width: 100%;
    height: 184rpx;
    background: #f7f7f7;
    padding: 24rpx 26rpx;
    box-sizing: border-box;
  }
  .clear-wrap {
    width: 48rpx;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
</style>
